import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, Upload, Icon, Button, InputNumber, Radio, TreeSelect, Switch } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';
import TextArea from 'antd/lib/input/TextArea';
import { formatMessage } from 'umi-plugin-react/locale';
import { ListItem } from '../data';
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

const FormItem = Form.Item;

interface ConfigFormProps extends FormComponentProps {
  modalVisible: boolean;
  otherValues: any;
  values: Partial<ListItem>;
  onSubmit: (fieldsValue: FormValueType) => Promise<any>;
  onCancel: () => void;
  handleChangeType: (value: any) => void;
}

export interface FormValueType extends Partial<ListItem> {
  id?: number;
  name?: string;
  remark?: string;
  type?: string;
  nickname?: string;
  rank_num?: number;
  is_enable?: any;
}

const ConfigForm: React.FC<ConfigFormProps> = props => {
  const { modalVisible, form, onSubmit: handleSubmit, onCancel, otherValues, values, handleChangeType } = props;
  const { isUpdate, radioType, common } = otherValues;
  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const treeData = DataHelper.getTreeData(common)
  const treeProps = {
    treeData: treeData,
    // onChange: this.handleCategoryChange,
    treeDefaultExpandAll: true,
    searchPlaceholder: '搜索值',
    style: { width: '100%' },
  }

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(picture.length > 0){
        fieldsValue.file_id   = picture[0].file_id
        fieldsValue.file_url  = picture[0].file_url
      }
      if (isUpdate) {
        fieldsValue.id = values.id;
      }
      handleSubmit(fieldsValue).then(success => {
        if (success) {
          form.resetFields();
        }
      });
    });
  };
  // 设置上传文件值
  const setUploadFile = (fileList: any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if (fileArr.length > 0) {
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    } else if (fileArr.length === 0) {
      console.log('set picture []')
      setPicture([])
    }
  }
  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(values.file_url)

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  return (
    <Modal
      destroyOnClose
      title={isUpdate ? "编辑分类" : "新增分类"}
      width="60%"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >

<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级分类" help="默认为一级分类">
      {form.getFieldDecorator('parent_id', {
        initialValue: isUpdate ? values.parent_id : [],
      })(<TreeSelect placeholder="请选择" {...treeProps} />)}
    </FormItem>
    
    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'教程分类名称'}>
      {form.getFieldDecorator('name', {
        initialValue: isUpdate ? values.name : '',
        rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
      })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })}/>)}
    </FormItem>

    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='昵称'>
      {form.getFieldDecorator('nickname', {
        initialValue: isUpdate ? values.nickname : '',
        rules: [],
      })(<Input placeholder={formatMessage({ id: 'app.base.please_input' })} />)}
    </FormItem>

    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={formatMessage({ id: 'app.base.rank_num' })}>
      {form.getFieldDecorator('rank_num', {
        initialValue: isUpdate ? values.rank_num : 888,
        rules: [{required: true}],
      })(<InputNumber placeholder={formatMessage({ id: 'app.base.please_input' })} style={{ width: '100%' }} min={1}/>)}
    </FormItem>

    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label='备注'>
      {form.getFieldDecorator('remark', {
        initialValue: isUpdate ? values.remark : '',
        rules: [],
      })(<TextArea rows={2} placeholder={formatMessage({ id: 'app.base.please_input' })} />)}
    </FormItem>
    </Modal>

  );
};

export default Form.create<ConfigFormProps>()(ConfigForm);
